<template>
    <div class="App">
        <ThreeMFViewer
            ref="threeMFViewerRef"
            :printerType="state.printerType"
            :url="state.url"
            @downloadProgress="actionsThreeMFViewer.downloadProgress"
            @parseProgress="actionsThreeMFViewer.parseProgress"
            @error="actionsThreeMFViewer.error"
            @success="actionsThreeMFViewer.success"
            @modelSelected="actionsThreeMFViewer.modelSelected"
        />
        <a-space :size="5" direction="vertical" class="container-lb">
            <a-button @click="actions.load3MF('./3mf/cubeme-带底座.3mf')"
                >加载：cubeme-带底座.3mf</a-button
            >
            <a-button @click="actions.load3MF('./3mf/单盘-单体/立方体-涂色-4色.3mf')"
                >加载：立方体-涂色-4色.3mf</a-button
            >
            <div v-if="state.modelSelected">
                <!-- px -->
                <a-row>
                    <a-col :span="12">
                        <a-slider
                            v-model:value="state.px"
                            :min="0"
                            :max="350"
                            @change="actions.changePositionX"
                        />
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                            prefix="px: "
                            v-model:value="state.px"
                            :min="0"
                            :max="350"
                            style="margin-left: 16px"
                        />
                    </a-col>
                </a-row>
                <!-- py -->
                <a-row>
                    <a-col :span="12">
                        <a-slider
                            v-model:value="state.py"
                            :min="min"
                            :max="max"
                            @change="actions.changePositionY"
                        />
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                            prefix="py: "
                            v-model:value="state.py"
                            :min="min"
                            :max="max"
                            style="margin-left: 16px"
                        />
                    </a-col>
                </a-row>
                <!-- rx -->
                <a-row>
                    <a-col :span="12">
                        <a-slider
                            v-model:value="state.rx"
                            :min="min"
                            :max="max"
                            @change="actions.changeRotationX"
                        />
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                            prefix="rx: "
                            v-model:value="state.rx"
                            :min="min"
                            :max="max"
                            style="margin-left: 16px"
                        />
                    </a-col>
                </a-row>
                <!-- ry -->
                <a-row>
                    <a-col :span="12">
                        <a-slider
                            v-model:value="state.ry"
                            :min="min"
                            :max="max"
                            @change="actions.changeRotationY"
                        />
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                            prefix="ry: "
                            v-model:value="state.ry"
                            :min="min"
                            :max="max"
                            style="margin-left: 16px"
                        />
                    </a-col>
                </a-row>
                <!-- rz -->
                <a-row>
                    <a-col :span="12">
                        <a-slider
                            v-model:value="state.rz"
                            :min="min"
                            :max="max"
                            @change="actions.changeRotationZ"
                        />
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                            prefix="rz: "
                            v-model:value="state.rz"
                            :min="min"
                            :max="max"
                            style="margin-left: 16px"
                        />
                    </a-col>
                </a-row>
                <!-- scale: 暂时只考虑等比例缩放 -->
                <a-row>
                    <a-col :span="12">
                        <a-slider
                            v-model:value="state.s"
                            :min="0.5"
                            :max="2"
                            :step="0.1"
                            @change="actions.changeScale"
                        />
                    </a-col>
                    <a-col :span="4">
                        <a-input-number
                            prefix="scale: "
                            v-model:value="state.s"
                            :min="min"
                            :max="max"
                            style="margin-left: 16px"
                        />
                    </a-col>
                </a-row>
            </div>
        </a-space>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue';
    import ThreeMFViewer from './components/ThreeMFViewer/index.vue';

    const min = 0;
    const max = 180;

    const threeMFViewerRef = ref();

    const state = reactive({
        url: '',
        printerType: 'Creality K2',
        modelSelected: false, // 是否有模型被选中
        px: 0,
        py: 0,
        rx: 0, // 角度
        ry: 0, // 角度
        rz: 0, // 角度
        s: 1
    });

    // setTimeout(() => {
    //     state.printerType = 'Creality K2 Plus';
    // }, 2000);

    const actions = {
        load3MF(url) {
            state.url = url;
        },
        changePositionX(value) {
            threeMFViewerRef.value.changePositionX(value);
        },
        changePositionY(value) {
            threeMFViewerRef.value.changePositionY(value);
        },
        changeRotationX(value) {
            threeMFViewerRef.value.changeRotationX(value);
        },
        changeRotationY(value) {
            threeMFViewerRef.value.changeRotationY(value);
        },
        changeRotationZ(value) {
            threeMFViewerRef.value.changeRotationZ(value);
        },
        changeScale(value) {
            threeMFViewerRef.value.changeScale(value, value, value);
        }
    };

    const actionsThreeMFViewer = {
        // 下载 3mf 进度的 callback
        downloadProgress(progress) {
            console.log(`download progress: ${progress.toFixed(1)}%`);
        },
        // 解析并渲染 3mf 进度的 callback
        parseProgress(progress) {
            console.log(`parse progress: ${progress.toFixed(1)}%`);
        },
        // 【下载，解析，渲染】3mf 中发生了错误的 callback
        error(error) {
            console.log(`error: `, error);
        },
        // 【下载，解析，渲染】3mf 成功的 callback
        success() {
            console.log(`success`);
        },
        modelSelected({ px, py, rx, ry, rz, sx, sy, sz }) {
            state.modelSelected = true;
            state.px = px;
            state.py = py;
            state.rx = rx;
            state.ry = ry;
            state.rz = rz;
            state.s = sx;
            console.log(`modelSelected`, { px, py, rx, ry, rz, sx, sy, sz });
        }
    };
</script>

<style lang="scss" scoped>
    .App {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;

        .container-lb {
            position: absolute;
            left: 5px;
            bottom: 5px;
        }
    }
</style>
